<template>
	<view>
		<cu-custom :bgImage="bgData" style="height: 200upx;" :isBack="true"><block slot="backText">返回</block>
			<block slot="content">黑盒子成员编辑</block>
		</cu-custom>
		<view class="cu-list menu sm-border card-menu margin-top margin-bottom">
			<view class="cu-item" style="height: 90px; background-size: 100% 100%; 
			background-repeat: no-repeat; -moz-background-size:100% 100%;"  
			:style="[{backgroundImage:'url('+imgData+')'}]">
				<view class="content">
					<view class="flex flex-wrap">
						<text style="color: #fff;font-size: 40upx;font-weight: 300;transform: skew(-10deg, 0deg);position: relative;text-shadow: 0px 0px 6upx rgba(0, 0, 0, 0.3)">{{userPoject.name}}</text>
						<view class="basis-xl"></view>
						<text class="childTitle">共{{personNum}}个成员</text>
					</view>
					
				</view>
				<view class="margin-tb-sm text-center" @click="editManage">
					<button class="cu-btn round bg-blue shadow">编辑</button>
				</view>
			
			</view>
		</view>
		
		<view class="cu-list card-menu menu-avatar">
			<view class="cu-bar bg-white solid-bottom">
				<view class="action">
					<text class="cuIcon-title text-orange "></text> 成员列表
				</view>
				<view class="padding-xs" @click="addPerson" style="margin-right: 10px;">
					<view class="cu-tag line-blue">+添加</view>
				</view>
			</view>
			<view class="cu-item" v-for="(item,index) in userList" :key="index" @tap="editPerson(item.id)">
				<view class="cu-avatar round lg" >
					<image style="width: 50px; height: 50px;" :src="item.img" @tap="ViewImage(item.img)"></image>
				</view>
				<view class="content">
					<view class="text-grey">
						<view class="text-pink"><view class="text-grey">{{item.name}}</view></view>
						<view class="cu-tag round bg-orange sm">{{item.talent}}</view>
					</view>
					<view class="text-gray text-sm flex">
						<view class="text-cut">
							<!-- <text class="cuIcon-infofill text-red  margin-right-xs"></text> -->
							{{item.remark}}
						</view> </view>
				</view>
				<view class="action">
					<view class="text-grey text-xs">{{item.position}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgData: this.imgPath+'back.png',
				userPoject: {},
				userList: [],
				imgData: '',
				personNum: 0
			}
		},
		onLoad() {
			this.showUser()
			this.showUserList()
		},
		onShow() {
			this.showUser()
			this.showUserList()
		},
		methods: {
			addPerson(e) {
				uni.navigateTo({
					url: "add_person"
				})
			},
			editManage(e) {
				uni.navigateTo({
					url: "edit_manage?id=1"
				})
			},
			editPerson(id) {
				uni.navigateTo({
					url: "add_person?id="+id
				})
			},
			ViewImage(img) {
				let imgList = []
				imgList.push(img)
				uni.previewImage({
					urls: imgList,
					current: imgList[0]
				});
			},
			showUser() {
				uni.request({
					url: this.serverPath + 'project/postProjectById',
					method: 'POST',
					header:{
						'Content-type':'application/x-www-form-urlencoded'
					},
					data: {
						id: 1
					},
					success:(res)=> {
						this.userPoject = res.data.data
						this.imgData = this.userPoject.img
					}
				})
			},
			showUserList() {
				uni.request({
					url: this.serverPath + 'user/postUserList',
					method: 'POST',
					header:{
						'Content-type':'application/x-www-form-urlencoded'
					},
					
					success:(res)=> {
						this.userList = res.data.data
						this.personNum = this.userList.length
					}
				})
			}
		}
	}
</script>

<style>
	.cardTitle {
		color: #fff;
		font-size: 40upx;
		font-weight: 300;
		transform: skew(-10deg, 0deg);
		position: relative;
		text-shadow: 0px 0px 6upx rgba(0, 0, 0, 0.3)
	}
	.childTitle {
		color: #fff;
		font-size: 28upx;
		font-weight: 200;
		transform: skew(-10deg, 0deg);
		position: relative;
		text-shadow: 0px 0px 6upx rgba(0, 0, 0, 0.3)
	}
	.right {
		margin-right: 10upx;
	}
</style>
